<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<!-- 모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="assets/ico/favicon.png" />
		<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png" />

		<!-- bootstrap -->
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
		<!-- 나눔고딕 웹 폰트 적용 -->
		<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
		<!-- 반응형 웹을 지원하지 않을 경우 -->
		<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

		<!-- IE8 이하 버전 지원 -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

		<!-- IE10 반응형 웹 버그 보완 -->
		<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->

		<title>alarm-page</title>
	
		<style type="text/css">
			/*기본 속성*/
			body {
				padding-top: 50px;
			}

			ul, li {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			/*상단바 스타일 속성*/
			nav.navbar {
				line-height: 50px;
			}

			.navbar span {
				color: #FFFFFF;
				font-size: 16px;
			}

			.nav_btns {
				width: 50px;
			}

			/*안내바 속성*/
			.sub-header-box {
				line-height: 50px;
				position: relative;
			}

			.sub-header-btn {
				position: absolute;
				right: 0px;
				top: 8px;
			}

			/*리스트 속성*/
			.list-box {
				border-top: 1px solid #CCCCCC;
			}

			.list-case {
				border-bottom: 1px solid #CCCCCC;
			}

			.list-box > .list-case > ul > li {
				display: inline-block;
			}

			.alarm-thumbnail {
				line-height: 74px;
				width: 50px;
				text-align: center;
			}

			.alarm-thumbnail > a {
				font-size: 30px;
			}

			.list-outer {
				line-height: 20px;
			}

			.list-inner {
				margin-left: 10px;
			}

			.list-inner > li:nth-child(1) {
				font-size: 16px;
				font-weight: 700;
				line-height: 35px;
			}

			.alarm-sub-sign > a {
				position: relative;
				top: 25px;
				font-size: 20px;
				color: #CCCCCC;
				line-height: 80px;
			}

			.list-sub {
				background-color: #D9EDF7;
				line-height: 50px;
			}
			
			body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
			    margin-right: 0px !important;
			}
	
		</style>
	</head>

	<body>
		<!-- 팝업창 -->
		<div id="myModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<!--팝업창 꾸미기-->
				<div class="modal-content">
					<!--제목영역-->
					<div class="modal-header">
						<!-- 닫기 아이콘 -->
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<!-- 타이틀 -->
						<h4 class="modal-title" id="myModalLabel">팝업창 제목</h4>
					</div>
					<!--내용-->
					<div class="modal-body">
						<h4>팝업창의 내용영역</h4>
						<p>내용은 이렇게 표시 됩니다.</p>
					</div>
					<!--하단영역-->
					<div class="modal-footer">
						<button type="button" class="btn btn_default" data-dismiss="modal">닫기</button>
						<button type="button" class="btn btn_primary">저장</button>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 상단 해더 바 -------------------------------------------------------->
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<div class="container text-center">
				<div class="pull-right">
					<button class="btn btn-inverse nav_btns">
						완료
					</button>
				</div>
				<span>알람설정</span>
				<div class="pull-left">
					<button class="btn btn-inverse nav_btns">
						<i class="icon-arrow-left"></i>
					</button>
				</div>
			</div>
		</nav>

		<!-- 내용 영역 -------------------------------------------------------->
		<div class="container">
			<!-- 안내 바 -------------------------------------------------------->
			<div class="text-center sub-header-box">
				<span> 출발시간<strong id="dep-time">00:00 </strong>도착시간 <strong id="arr-time">00:00</strong> </span>
				<div class="pull-right">
					<a href="#myModal" data-toggle="modal" class="btn btn-primary">Click</a>
				</div>
			</div><!--안내바 끝-->

			<!-- 시간 셋팅 박스 -------------------------------------------------------->

		</div>

		<!-- list -------------------------------------------------------->
		<div class="list-box">
			<!-- 리스트 전체를 감싸는 박스 -->
			<div class="list-case">
				<!-- 리스트 하나를 감싸는 박스 -->

				<div class="container">
					<!-- 리스트 내부를 감싸는 박스 -->
					<div class="alarm-thumbnail pull-left">
						<a><i class="fa fa-clock-o"></i></a>
					</div>
					<div class="list-outer pull-left">
						<ul class="list-inner">
							<li>
								강남역
							</li>
							<li>
								출발예정시간: <strong>00시 00분</strong>
							</li>
							<li>
								<span>알람설정: <span class="text-warning">1분 전</span></span>
							</li>
						</ul>
					</div>

					<div class="alarm-sub-sign pull-right">
						<a><i class="fa fa-chevron-circle-down"></i></a>
					</div>
				</div>

				<div class="list-sub hidden">
					<!--알람설정메뉴-->
					<div class="container">
						<div class="pull-right">
							<button class="btn btn-primary">
								15분전
							</button>
							<button class="btn btn-success">
								10분전
							</button>
							<button class="btn btn-warning">
								5분전
							</button>
							<button class="btn btn-danger">
								1분전
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="assets/js/jquery.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
	</body>
</html>